<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
  <link rel="stylesheet" href="./packages/style/index.scss">
  <link rel="stylesheet" href="./packages/style/base.scss">
  <link rel="stylesheet" href="./src/index.scss">
  <script src="https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.development.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
</head>
<body>
  <div id="app"></div>

  <script type="module" lang="ts">
    import { Preview, Toast, Dialog } from './packages';

    function App() {
      const handleClickDialog = () => {
        Dialog({
          title: '提示',
          content: '确认要这样做吗?',
          // closable: true,
          buttons: [
            { text: '取消', color: 'red' },
            { text: '确定', onClick: (index) => {
              console.log('确定', index);
              const hide = Toast.loading('');
              return new Promise((resolve) => {
                setTimeout(() => {
                  hide();
                  resolve();
                }, 2000);
              });
            }}
          ],
        }).then(index => {
          console.log('关闭后', index);
        });
      };

      const handleToast = () => {
        Toast('默认提示');
      };
      const handleInfo = () => {
        Toast.info('Info 提示');
      };
      const handleError = () => {
        Toast.error('Error 提示');
      };
      const handleSuccess = () => {
        Toast.success('Success 提示');
      };
      const handleWarn = () => {
        Toast.warn('Warn 提示');
      };

      const handleLoading = () => {
        const hide = Toast.loading('加载中...');

        setTimeout(hide, 3000);
      };

      const handleClickPreview = () => {
        const hide = Preview({
          imageList: [
            'https://scpic.chinaz.net/files/pic/pic9/202101/apic30573.jpg',
            'https://scpic.chinaz.net/files/pic/pic9/202101/apic30607.jpg',
            'https://scpic.chinaz.net/files/pic/pic9/202012/apic29825.jpg',
            'https://scpic.chinaz.net/files/pic/pic9/201807/zzpic12710.jpg',
            'https://scpic.chinaz.net/files/pic/pic9/202010/apic28292.jpg',
          ],
          onClick: (index) => {
            console.log('点击了', index);
            hide();
          },
        });
      };

      return (
        <>
          <div className="card">
            <button className="tui-button" onClick={handleToast}>Toast 提示</button>
            <button className="tui-button" onClick={handleLoading}>Toast Loading</button>
            <button className="tui-button" onClick={handleInfo}>Toast Info</button>
            <button className="tui-button" onClick={handleError}>Toast Error</button>
            <button className="tui-button" onClick={handleSuccess}>Toast Success</button>
            <button className="tui-button" onClick={handleWarn}>Toast Warn</button>
            <button className="tui-button" onClick={handleClickDialog}>Dialog 弹窗</button>
            <button className="tui-button" onClick={handleClickPreview}>Preview 弹窗</button>
          </div>
        </>
      );
    }

    ReactDOM.render(<App />, document.getElementById('app'));
  </script>
</body>
</html>
